<style>
.el-select .el-input {
    width: 130px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>

<template>
    <div>
        <div>
            <div style="margin-top: 15px;max-width: 400px">
                <el-input placeholder="请输入内容" v-model="query.titleAndInformation" maxlength="200px"  class="input-with-select">
                    <el-select v-model="query.noticeType" slot="prepend" placeholder="请选择" @change="TypeSelectChange(query.noticeType)">
<!--                        <el-option v-for="item in noticeType" :key="item.code" :value="noticeType.name" :label="noticeType.name"></el-option>-->
                        <el-option
                            v-for="item in noticeType"
                            :key="item.code"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                    <el-button slot="append" @click="titleAndInformationChange(query.titleAndInformation)">搜索</el-button>
                </el-input>
            </div>
            <br/>
<!--            按钮-->
            <el-button size="small" type="primary" @click="handleQuery" v-auth code="account:notice:list">刷新列表</el-button>
            <el-button size="small" type="primary" @click="showAdd" v-auth code="account:notice:add">发布公告</el-button>
            <el-button size="small" type="primary" @click="showEdit"v-auth code="account:notice:update">编辑公告</el-button>
            <el-button size="small" type="primary" @click="showDetails"v-auth code="account:notice:detail">查看详情</el-button>
            <el-button size="small" type="danger" @click="showDelete"v-auth code="account:notice:delete">删除公告</el-button>
        </div>
        <br/>
        <el-table
            :data="tableData"
            stripe
            highlight-current-row
            @current-change="currentChange"
            style="width: 100%">
            <el-table-column
                prop="title"
                label="标题" >
            </el-table-column>
            <el-table-column
                prop="information"
                label="内容">
            </el-table-column>
            <el-table-column
                prop="noticeType"
                label="通知类型">
            </el-table-column>
            <el-table-column
                prop="createdUser"
                label="发布者">
            </el-table-column>
            <el-table-column
                prop = "createTime"
                label = "创建时间">
            </el-table-column>
            <el-table-column
                prop = "updateTime"
                label = "修改时间">
            </el-table-column>

        </el-table>


        <el-pagination class="pagination"
                       layout="prev, pager, next"
                       :total="totalCount" @current-change="handleCurrentChange">
        </el-pagination>
        <br/>

        <el-dialog title="发布公告" :visible.sync="addDialogVisible" width="90%">
            <template>
                <el-tabs v-model="activeName"  >
                    <el-tab-pane label="编辑信息" name="first">
                        <el-form label-width="80px">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-form-item label="标题" :error="errors.title">
                                        <el-input v-model="form.title" placeholder="请输入通知标题" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
<!--                            <el-row :gutter="10">-->
<!--                                    <el-col :span="24" >-->
<!--                                        <el-form-item label="内容主体" :error="errors.information">-->
<!--                                            <el-input   type="textarea"  placeholder="请输入通知主体内容"  v-model="form.information" ></el-input>-->
<!--                                        </el-form-item>-->
<!--                                    </el-col>-->
<!--                            </el-row>-->

                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-form-item label="通知类型" :error="errors.noticeType">
                                        <el-select  v-model="query.noticeType"  placeholder="请选择通知类型" >
                                            <el-option
                                                v-for="item in noticeType"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="内容主体" prop="words">
                                <div class="edit_container" style="height: auto">
                                    <quill-editor   v-model="form.information" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
                                    </quill-editor>
                                </div>
                            </el-form-item>


                            <el-form-item>
                                <el-button type="primary" @click="handleSubmit">立即发布</el-button>
                                <el-button @click="addDialogVisible = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-dialog>


        <el-dialog title="编辑公告" :visible.sync="editDialogVisible" width="90%">
            <template>
                <el-tabs v-model="activeName"  >
                    <el-tab-pane label="编辑信息" name="first">
                        <el-form label-width="80px">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-form-item label="标题" :error="errors.title">
                                        <el-input v-model="form.title" placeholder="请输入通知标题" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="内容主体" prop="words">
                                <div class="edit_container">
                                    <quill-editor   v-model="form.information" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
                                    </quill-editor>
                                </div>
                            </el-form-item>

                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-form-item label="通知类型" :error="errors.noticeType">
                                        <el-select  v-model="form.noticeType"  placeholder="请选择通知类型" >
                                            <el-option
                                                v-for="item in noticeType"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item>
                                <el-button type="primary" @click="handleSubmit">确认编辑</el-button>
                                <el-button @click="editDialogVisible = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-dialog>


        <el-dialog title="公告详情" :visible.sync="detailDialogVisible" width="90%">
            <template>
                <el-tabs v-model="activeName"  >
                    <el-tab-pane label="公告信息" name="first">
                        <el-form label-width="80px">
                            <el-row :gutter="10">
                                <el-col  :span="14">
                                    <el-form-item label="标题" :error="errors.title" >
                                        <el-input v-model="form.title" disabled autosize placeholder="请输入通知标题" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="24" >
                                    <el-form-item label="内容主体" :error="errors.information">
                                        <el-input   type="textarea" disabled  placeholder="请输入通知主体内容" autosize  v-model="form.information" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-form-item label="通知类型" :error="errors.noticeType">
                                        <el-select  v-model="form.noticeType" disabled  placeholder="请选择通知类型" >
                                            <el-option
                                                v-for="item in noticeType"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.el-col {
    border-radius: 4px;
}
</style>

<script>
import Config from 'Config';
import ElDialog from "../../../../node_modules/element-ui/packages/dialog/src/component.vue";
import ElCol from "element-ui/packages/col/src/col";
import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
    components: {
        quillEditor,
        ElButton,
        ElCol,
        ElDialog
    },



    data() {
        return {
            noticeType:{//通知类型
                code:'',
                name:''
            },
            tableData: [],
            totalCount:0,
            query : {
            },
            activeName: 'first',
            form: {
            },
            errors:{
            },
            multipleSelection: [],
            addDialogVisible: false,
            editDialogVisible: false,
            detailDialogVisible:false,
        }
    },
    created () {
        this.handleQuery();
        this.initSelect();
    },
    methods: {
        onEditorReady(editor) {

        },
        currentChange(currentRow, oldCurrentRow) {
            this.currentRow = currentRow;
        },
        handleSelectedNode(node) {
            this.selectedNode = node.id;
        },
        handleCurrentChange(page) {
            this.query.page = page;
            this.handleQuery();
        },

        //展示添加页面
        showAdd(){
            this.$objectUtils.clear(this.errors);
            this.$objectUtils.clear(this.form);
            this.activeName= 'first';
            this.addDialogVisible = true;
        },
        //展示详情
        showDetails(){
            if(this.currentRow != null) {
                this.$objectUtils.clear(this.errors);
                this.$objectUtils.clear(this.form);
                this.$axios.get(this.$config.SYSTEM_HOST + "/notice?id=" + this.currentRow.id).then((res) => {
                    this.$responseUtils.handlerError(res);
                    this.form = res.data.data;
                    this.activeName = 'first',
                        this.detailDialogVisible = true;
                });
            }else{
                this.$message.error("请先选择一个机构!");
            }
        },
        //展示修改页面
        showEdit() {
            if(this.currentRow != null) {
                if (this.currentRow.id!=null) {
                    console.log(this.currentRow);
                    // this.$objectUtils.clear(this.errors);
                    // this.$objectUtils.clear(this.form);
                    this.$axios.get(this.$config.SYSTEM_HOST + "/notice?id=" + this.currentRow.id).then((res) => {
                        this.$responseUtils.handlerError(res);
                        this.form = res.data.data;
                        this.activeName = 'first';
                        this.editDialogVisible = true;

                    });
                } else {
                    this.$message('该机构当前状态无法修改!');
                }
            }else{
                this.$message.error("请先选择一个机构!");
            }
        },
        //显示删除界面
        showDelete() {
            if(this.currentRow == null){
                this.$message.error("请先选择你要删除的通知!");
                return;
            }

            this.$confirm(<p>你确定要取消<span style="color: red;">{this.currentRow.name}</span>?</p>, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete(this.$config.SYSTEM_HOST + "/notice?id=" + this.currentRow.id).then((res) => {
                    if(res.data.success){
                        this.$message('删除成功!');
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.handleQuery();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //添加和修改
        handleSubmit() {
            this.$objectUtils.clear(this.errors);
            if(this.form.id){
                //修改
                this.$axios.put(this.$config.SYSTEM_HOST +"/notice",this.form).then((res) => {
                    if(res.data.success){
                        this.editDialogVisible = false;
                        this.updatePage();
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((response) => {
                    if(this.$responseUtils.isBadRequest(response)){
                        this.errors = this.$responseUtils.getErrors(response);
                    }
                });
            }else{
                //添加
                this.$axios.post(this.$config.SYSTEM_HOST  +"/notice",this.form).then((res) => {
                    this.$responseUtils.handlerError(res);
                    this.addDialogVisible = false;
                    this.updatePage();
                }).catch((response) => {
                    if(this.$responseUtils.isBadRequest(response)){
                        //在这里处理验证错误
                        this.errors = this.$responseUtils.getErrors(response);
                    }
                });
            }
        },

        //刷新页面(有筛选条件)
        updatePage(){
            this.$axios.get(this.$config.SYSTEM_HOST + "/notice/query1" ).then((res) => {
                this.tableData = res.data.data.rows;
                this.totalCount = res.data.data.totalCount;
            });
        },
        //刷新页面(去除筛选条件)
        handleQuery(){
            this.$objectUtils.clear(this.query);
            this.$axios.get(this.$config.SYSTEM_HOST + "/notice/query1" ).then((res) => {
                this.tableData = res.data.data.rows;
                this.totalCount = res.data.data.totalCount;
            });
        },
        //加载下拉框【通知类型】
        initSelect(){
            //公告类型
            this.$axios.get(this.$config.SYSTEM_HOST + "/dict_type/query1?code=NOTICE_TYPE").then((res) => {
                this.noticeType = res.data.data.rows[0].dataDictDetails;
            });

        },
        //通知类型的选中事件
        TypeSelectChange(selectedType){
            if (selectedType != ''){
                this.query.noticeType = selectedType;
                this.$axios.get(this.$config.SYSTEM_HOST + "/notice/query1" + this.$queryUtils.generateGetParameter(this.query)).then((res) =>{
                    this.tableData = res.data.data.rows;
                    this.totalCount = res.data.data.totalCount;
                })
            }
        },
        //搜索关键字的点击事件
        titleAndInformationChange(selectedQuery){
            if (selectedQuery != ''){
                this.query.titleAndInformation = selectedQuery;
                this.$axios.get(this.$config.SYSTEM_HOST + "/notice/query1" + this.$queryUtils.generateGetParameter(this.query)).then((res) =>{
                    this.tableData = res.data.data.rows;
                    this.totalCount = res.data.data.totalCount;
                })
            }
        },

    }
}
</script>

